<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>选择门店地址</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script type="text/javascript" src="/Public/Admin/lib/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="/Public/Admin/lib/layer/2.1/layer.js"></script> 

</head>

<body onload="init()">
    <script>
        var searchService, markers = [];
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });
            var latlngBounds = new qq.maps.LatLngBounds();
            //设置Poi检索服务，用于本地检索、周边检索
            searchService = new qq.maps.SearchService({
                //设置搜索范围为北京
                //location: "",
                //设置搜索页码为1
                pageIndex: 1,
                //设置每页的结果数为5
                pageCapacity: 5,
                //设置展现查询结构到infoDIV上
                panel: document.getElementById('infoDiv'),
                //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
                autoExtend: true,
                //检索成功的回调函数
                complete: function(results) {
                  	console.log(results);
                    //设置回调函数参数
                    var pois = results.detail.pois;
                    var infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    for (var i = 0, l = pois.length; i < l; i++) {
                        (function(n){
                            var poi = pois[i];
                            //扩展边界范围，用来包含搜索到的Poi点
                            latlngBounds.extend(poi.latLng);
                            var marker = new qq.maps.Marker({
                                title: poi.name,
                                map: map,
                                position: poi.latLng
                            });
                            var xianshi = new qq.maps.LatLng( poi.latLng.lat, poi.latLng.lng );
                            //console.log(xianshi);
                            markers.push(marker); // 将标记整合到一起
                            qq.maps.event.addListener(marker, 'click', function() {
                                //alert(poi.latLng.lat +','+ poi.latLng.lng);
                                infoWin.open();
                                infoWin.setContent(poi.name+'<br>'+poi.address+'<br>'+poi.phone+'<br><a href="javascript:;" onclick="choice(\''+poi.address+'\','+poi.latLng.lat+','+poi.latLng.lng+')">选择此地点</a>');
                                infoWin.setPosition( xianshi );
                            });
                        })(i);
                    }
                    //调整地图视野
                    map.fitBounds(latlngBounds);
                },
                //若服务请求失败，则运行以下函数
                error: function() {
                    alert("出错了。");
                }
            });

        }

         //清除地图上的marker
        function clearOverlays(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
        }
        //设置搜索的范围和关键字等属性
        function searchKeyword() {
            var keyword = document.getElementById("keyword").value;
            //在查询新的地点时，先清除地图上的marker
            clearOverlays(markers);
            //根据输入的城市设置搜索范围
            //searchService.setLocation("北京");
            //根据输入的关键字在搜索范围内检索
            searchService.search(keyword);
        }

        // 选择地点方法
        function choice(address,lat,lng){
            /*var url = "<?php echo U('Client/choiceAddressCheck',array('id'=>$id,'location'=>'address','longitude'=>'jingdu','latitude'=>'weidu'));?>";
            url = url.replace('address',address);
            url = url.replace('jingdu',lng);
            url = url.replace('weidu',lat);*/
            //var id = '<?php echo ($id); ?>';
            $.ajax({  
                url : "<?php echo U('Client/choiceAddressCheck');?>", 
                type: "POST",  
                data: {
                    "id" : "<?php echo ($id); ?>",
                    "location" : address,
                    "longitude" : lng,
                    "latitude" : lat,
                },
                dataType: "json",
                success: function(msg){ 
                    console.log(msg);
                    if(msg['state'] == 200){
                        layer.msg(msg['content'],{icon:1,time:1000});
                        setTimeout('window.location.href = "<?php echo U('Client/add',array('cid'=>$id));?>"', 1000);
                    }else{
                        layer.msg(msg['content'],{icon:2,time:1000});
                    }
                } , 
            });
        }
    </script>
    <div>
        <input id="keyword" type="textbox" value="">
        <input type="button" value="搜索" onclick="searchKeyword()"><span style="color:red;"> 注：点击查询出的标记查看详情</span>
        <a href="<?php echo U('Client/add',array('cid'=>$id));?>">返回</a>
    </div>
    <div style="width:95%; height:400px;" id="container"></div>
    <div style='width:95%; height:180px;' id="infoDiv"></div>
</body>

</html>